<script setup>
const istyle = defineModel()
const props = defineProps({
  // istyle: Object,
  eleDef: Object,
  currentItemElCode: String
})
</script>

<template>
  <div class="ele-prop-item">
    <el-form label-width="60px" label-position="top" size="mini" v-if="istyle">
      <el-form-item label="">
        <el-select
          v-model="istyle.transitionTimingFunction"
        >
          <el-option value="" label="默认"></el-option>
          <el-option value="none" label="无"></el-option>
          <el-option value="linear" label="linear 匀速"></el-option>
          <el-option value="ease-in" label="ease-in 先慢后快"></el-option>
          <el-option value="ease-out" label="ease-out 先快后慢"></el-option>
          <el-option value="ease" label="ease 慢快慢"></el-option>
          <el-option value="ease-in-out" label="ease-in-out 慢快慢-柔和"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="持续时长">
        <template #label>
          <div class="w-full flex justify-between">
            <span>持续时长</span>
            <el-input-number
              v-model="istyle.transitionDuration"
              size="small"
              :min="0"
              :max="5"
              :step="0.01"
              class="pure-lack w-20"
              controls-position="right"
            />
          </div>
        </template>
        <el-slider
          v-model="istyle.transitionDuration"
          height="20"
          size="small"
          :min="0"
          :max="3"
          :step="0.01"
        />
      </el-form-item>

      <el-form-item label="延迟时间">
        <template #label>
          <div class="w-full flex justify-between">
            <span>延迟时间</span>
            <el-input-number
              v-model="istyle.transitionDelay"
              size="small"
              :min="0"
              :max="5"
              :step="0.01"
              class="pure-lack w-20"
              controls-position="right"
            />
          </div>
        </template>
        <el-slider
          v-model="istyle.transitionDelay"
          height="20"
          size="small"
          :min="0"
          :max="3"
          :step="0.01"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
